<template>
  <div class="content-wraper">
    <el-row class="content">
      <el-col :span="6" class="content-left">
        <el-button type="primary" size="mini" icon="el-icon-plus" @click="showDirectoryMange=true;">材料目录管理</el-button>
        <tree-box
          v-model="selectedNode"
          :data="treeData"
          title="材料目录"
        />
      </el-col>
      <el-col :span="18" class="content-right">
        <div class="search-box">
          <el-form label-width="100px" :inline="true">
            <el-form-item label="材料名称">
              <el-input v-model="name" />
            </el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
            <el-button type="primary" size="mini" icon="el-icon-plus" @click="addMaterial">新增</el-button>
            <el-button type="success" size="mini" icon="el-icon-edit" @click="updateMaterialCode">修改</el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="delMaterial">删除</el-button>
          </el-form>
        </div>
        <div class="detail">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            highlight-current-row
            @current-change="handleCurrentChange"
          >
            <el-table-column
              prop="code"
              label="材料编码"
            />
            <el-table-column
              prop="name"
              label="材料名称"
            />
            <el-table-column
              prop="specification"
              label="规格"
            />
            <el-table-column
              prop="unit"
              label="单位"
            />
            <el-table-column
              prop="type"
              label="类型"
            >
              <template slot-scope="{row}">
                {{ types[row.type] }}
              </template>
            </el-table-column>
            <el-table-column
              prop="enable"
              label="禁用"
            />
            <el-table-column
              prop="description"
              label="说明"
            />
          </el-table>
          <el-pagination
            background
            layout="prev, pager, next"
            :current-page.sync="pageParams.pageNum"
            :total="total"
            @current-change="handlePageChange"
          />
        </div>
      </el-col>
    </el-row>

    <el-dialog
      :title="actionType===1?'新增材料':'更新材料'"
      :visible.sync="showAddMaterial"
      width="700px"
      center
    >
      <add-material ref="form" :data="updateMaterialCodeObj" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="showAddMaterial = false">取 消</el-button>
        <el-button type="primary" @click="addMaterial_Save">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="材料目录"
      :visible.sync="showDirectoryMange"
      class="especial-modal"
      width="700px"
      center
    >
      <el-button type="primary" icon="el-icon-plus" size="mini" @click="directAdd(0)">同级新增</el-button>
      <el-button type="success" icon="el-icon-plus" size="mini" @click="directAdd(1)">下级新增</el-button>
      <el-button type="danger" icon="el-icon-delete" size="mini" @click="directDel()">删除</el-button>
      <el-table
        :data="treeData"
        style="width: 100%;"
        row-key="id"
        border
        highlight-current-row
        default-expand-all
        :tree-props="{children: 'nodes', hasChildren: 'hasChildren'}"
        @current-change="handleNodeClick"
      >
        <el-table-column
          prop="name"
          label="目录名称"
        />
      </el-table>
    </el-dialog>
    <el-dialog
      title="新增材料目录"
      :visible.sync="showAddMaterialDirect"
      width="700px"
      center
    >
      <el-form label-width="150px">
        <el-row>
          <el-col :span="20">
            <el-form-item label="新增类型" :prop="addDirect&&addDirect.directAddType">
              <span>{{ addDirect&&addDirect.directAddType }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="当前材料目录名称" :prop="directCurrentNode&&directCurrentNode.name">
              <span>{{ directCurrentNode&&directCurrentNode.name }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="材料目录名称" :prop="addDirect.name">
              <el-input v-model="addDirect.name" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showAddMaterialDirect = false">取 消</el-button>
        <el-button type="primary" @click="add_Direct">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import addMaterial from './components/addMaterial.vue'
import {
// 材料目录模块
  addMaterialDirectory,
  deleteMaterialDirectory,
  // getMaterialDirectoryDetail,
  // getMaterialDirectoryList,
  getMaterialDirectoryTree,
  // updateMaterialDirectory,
  // 材料详情模块
  addMaterialDetail,
  deleteMaterialDetail,
  // getMaterialDetailDetail,
  getMaterialDetailList,
  updateMaterialDetail

} from '@/api/basicCode'
export default {
  name: 'MaterialCode',
  components: {
    addMaterial
  },
  data() {
    return {
      types: {
        1: '消耗材', 2: '周转材', 3: '设备'
      },
      directCurrentNode: null,
      showDirectoryMange: false,
      defaultProps: {
        children: 'nodes',
        label: 'name'
      },
      name: '',
      showAddMaterialDirect: false,
      addDirect: {},
      treeData: [], // 材料目录
      tableData: [], // 材料表格数据
      showAddMaterial: false, // 显示新增材料弹窗
      currentRow: null, // 当前表格选中行
      selectedNode: null, // 当前树结构选中行
      updateMaterialCodeObj: {}, // 表格单条材料体
      actionType: 1, // 1 新增材料 2更新材料
      defineWorkList: [], // 材料定义列表数据
      currentDefineWork: null, // 表格选中的单条材料定义
      pageParams: {
        pageSize: 10,
        pageNum: 1
      },
      total: 0,
      filterText: '',
      flowDetail: {},

      showDefineWorkList: false
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    },
    selectedNode(newValue) {
      this.getTableList(newValue)
    }
  },

  mounted() {
    this.initTree()
  },
  methods: {
    search() {
      this.getTableList(this.selectedNode)
    },
    // 获取树结构目录
    initTree() {
      getMaterialDirectoryTree().then(res => {
        const { nodes } = res.data || {}
        this.treeData = nodes || []
      })
    },
    // 材料目录相关
    handleNodeClick(val) {
      this.directCurrentNode = val
    },
    // 同级新增 0  下级新增 1
    directAdd(type) {
      this.addDirect.directAddType = type === 0 ? '同级新增' : '下级新增'
      if (!this.directCurrentNode) {
        this.$message({
          type: 'error',
          message: '请选择一个材料目录!'
        })
        return
      }
      this.showAddMaterialDirect = true
    },
    // 删除目录
    directDel() {
      if (!this.directCurrentNode) {
        this.$message({
          type: 'error',
          message: '请选择一个材料目录!'
        })
        return
      }
      this.$confirm('确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.del_Direct()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    del_Direct() {
      const params = {
        materialDirectoryId: this.directCurrentNode.id
      }
      deleteMaterialDirectory(params).then(res => {
        this.showTipsFn(res, '删除', () => {
          this.showDirectoryMange = false
          this.directCurrentNode = {}
          this.initTree()
        })
      })
    },
    // 确认新增目录
    add_Direct() {
      if (!this.addDirect.name) {
        this.$message({
          type: 'error',
          message: '请输入材料目录!'
        })
        return
      }
      const params = {
        name: this.addDirect.name,
        parentId: this.addDirect.directAddType === '同级新增' ? this.directCurrentNode.parentId : this.directCurrentNode.id
      }
      addMaterialDirectory(params).then(res => {
        this.showTipsFn(res, '保存', () => {
          this.showAddMaterialDirect = false
          this.showDirectoryMange = false
          this.directCurrentNode = {}
          this.initTree()
        })
      })
    },
    // 获取材料表格数据
    getTableList(data) {
      const { id, code } = data
      if (id) {
        const params = {
          'materialDirectoryId': id,
          'name': this.name,
          'code': code,
          ...this.pageParams
        }
        getMaterialDetailList(params).then(res => {
          if (res.data && res.data.data) {
            this.tableData = res.data.data
            this.total = Number(res.data.total)
          }
        })
      }
    },
    handlePageChange(val) {
      this.pageParams.pageNum = val
      this.getTableList(this.selectedNode)
    },
    handleCurrentChange(val) {
      this.currentRow = val
      this.currentDefineWork = val
    },
    addMaterial() {
      if (!this.selectedNode) {
        this.$message({
          type: 'error',
          message: '请选择一个材料目录!'
        })
        return
      }
      this.actionType = 1
      this.showAddMaterial = true
    },
    addMaterial_Save() {
      this.$refs.form.validateForm(valid => {
        if (valid) {
          const params = {
            ...this.$refs.form.form,
            materialDirectoryId: this.selectedNode.id
          }
          if (this.actionType === 1) {
            addMaterialDetail(params).then(res => {
              this.showTipsFn(res, '保存', () => {
                this.showAddMaterial = false
                this.$refs.form.resetForm()
                this.getTableList(this.selectedNode)
              })
            })
          } else {
            updateMaterialDetail(params).then(res => {
              this.showTipsFn(res, '保存', () => {
                this.showAddMaterial = false
                this.$refs.form.resetForm()
                this.getTableList(this.selectedNode)
              })
            })
          }
        }
      })
    },
    updateMaterialCode() {
      if (!this.currentRow) {
        this.$message({
          type: 'error',
          message: '请选择一个材料!'
        })
        return
      }
      this.actionType = 2
      this.updateMaterialCodeObj = this.currentRow
      this.showAddMaterial = true
    },
    delMaterial() {
      if (!this.currentRow) {
        this.$message({
          type: 'error',
          message: '请选择一个材料!'
        })
        return
      }
      this.$confirm('确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.del_Material()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    del_Material() {
      const params = {
        materialDetailId: this.currentRow.id
      }
      deleteMaterialDetail(params).then(res => {
        this.showTipsFn(res, '删除', () => {
          this.getTableList(this.selectedNode)
        })
      })
    },

    // 新增，修改，删除 提示文案
    showTipsFn(res, type, successFn) {
      const { code, msg } = res
      if (code === '0001') {
        this.$message({
          type: 'success',
          message: `${type}成功!`
        })
        if (successFn) {
          successFn()
        }
      } else {
        this.$message({
          type: 'error',
          message: msg || `${type}失败!`
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.content{
  height:100%;
  .content-left,.content-right{
    height: 100%;
  }
  .content-left{
    padding-right: 10px;
    border-right: 1px solid #dedede;
    .el-button{
      margin-bottom: 10px;
    }
  }
  .content-right{
    padding-left: 10px;
    .search-box {
    margin-top: 15px;
  height: 50px;
}
    .detail{
      height: calc(100% - 40px);
      margin-top: 10px;
      overflow: auto;
    }
  }
  .tree{
    height: calc(100% - 40px);
    padding-top: 10px;
  }
}
</style>
